<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/1/4
  Time: 9:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%--核心库--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>公共的菜单栏--导航条</title>

    <%--导入jquery的js库--%>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<!--
            描述：菜单栏
        -->
<div class="container-fluid">
    <div class="col-md-4">
        <img src="${pageContext.request.contextPath}/img/logo2.png" />
    </div>
    <div class="col-md-5">
        <img src="${pageContext.request.contextPath}/img/header.png" />
    </div>
    <div class="col-md-3" style="padding-top:20px">
        <ol class="list-inline">
            <%--判断--%>
            <c:if test="${empty user}">
                <%--空对象--%>
                <li><a href="${pageContext.request.contextPath}/jsp/login.jsp">登录</a></li>
                <!--${pageContext.request.contextPath} 通过pageContext域对象获取request bean属性同时通过
                request对象获取contextPath这个bean属性,获取上下文路径
                等价于pageContext.getRequest().getcontextPath()
                -->
                <li><a href="${pageContext.request.contextPath}/jsp/register.jsp">注册</a></li>
                <li><a href="">购物车</a></li>
            </c:if>
            <c:if test="${not empty user}">
                欢迎,<b>${user.name}</b>
                <a href="${pageContext.request.contextPath}/user?methodName=userLogout">退出</a>
                <a href="#">我订单列表</a>
            </c:if>

        </ol>
    </div>
</div>
<!--
    描述：导航条 nav 标签是boostrap提供的导航条组件
-->
<div class="container-fluid">
    <nav style="background-color: darkslategrey" class="navbar navbar-inverse">
        <div class="container-fluid">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
<%--                <a class="navbar-brand" href="#">首页</a>--%>
            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul id="daohangUl" class="nav navbar-nav">
                    <%--展示--%>
                    <%--<li><a  class="daohang_a" href="product_list.htm">手机数码<span class="sr-only">(current)</span></a></li>
                    <li><a  class="daohang_a" href="#">电脑办公</a></li>
                    <li><a class="daohang_a" href="#">电脑办公</a></li>
                    <li><a class="daohang_a" href="#">电脑办公</a></li>--%>
                </ul>
                <form class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>

            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
</div>
</body>

        <script>
            //Jquery的页面载入事件
            $(function(){
                //直接发送ajax请求
                $.ajax({
                   "url":"${pageContext.request.contextPath}/category?methodName=getAllCategory" ,
                   "type":"GET",
                   "success":function(data){ //data:js对象
                       //data,服务器发送过来的数据

                       //data需要处理
                       //data--现在就是
                       /**
                        * [
                        *   {"cname":"手机数码","cid":"1"},
                        *   {"cname":"运动户外","cid":"172934bd636d485c98fd2d3d9cccd409"},
                        *   {"cname":"电脑办公","cid":"2"},
                        *   {"cname":"家具家居","cid":"3"},
                        *   {"cname":"鞋靴箱包","cid":"4"},
                        *   {"cname":"图书音像","cid":"5"},
                        *   {"cname":"aaaa","cid":"59f56ba6ccb84cb591c66298766b83b5"},
                        *   {"cname":"母婴孕婴","cid":"6"},
                        *   {"cname":"汽车用品","cid":"afdba41a139b4320a74904485bdb7719"}
                        *   ]
                        */
                       //获取导航条的ul标签的jquery对象
                       var $ul = $("#daohangUl") ;
                       //需要将data遍历出来
                       //Jquery的api提供Jquery对象访问的核心方法-->each(callback)
                       $(data).each(function(){

                          //$(data)---this
                          //alert(this.cname) ;
                           //给$ul对象的后面通过Jquery文档处理---可以拼接内容
                           //append(content|fn)
                           $ul.append("<li><a href='${pageContext.request.contextPath}/product?methodName=getProdcutByPage&cid="+this.cid+"'>"+this.cname+"<span class='sr-only'>(current)</span></a></li>");
                       });

                   } ,
                    "dataType":"json"
                });
            }) ;
        </script>
</html>
